<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Client-Side Localization Test</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="/static/js/i18n.js"></script>
</head>
<body class="bg-dark text-light">
  <div class="container mt-4">
    <h1>Client-Side Localization Test</h1>
    
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h5 data-i18n="dashboard.title">Dashboard</h5>
          </div>
          <div class="card-body">
            <p data-i18n="dashboard.welcome">Welcome to your Thingino camera system</p>
            
            <h6>Common Buttons:</h6>
            <button class="btn btn-primary me-2" data-i18n="common.save">Save</button>
            <button class="btn btn-secondary me-2" data-i18n="common.cancel">Cancel</button>
            <button class="btn btn-success me-2" data-i18n="common.apply">Apply</button>
            
            <h6 class="mt-3">Navigation Items:</h6>
            <ul class="list-unstyled">
              <li data-i18n="nav.dashboard">Dashboard</li>
              <li data-i18n="nav.preview">Preview</li>
              <li data-i18n="nav.streamer">Streamer</li>
              <li data-i18n="nav.motion">Motion</li>
            </ul>
            
            <h6 class="mt-3">Inline Translation Test:</h6>
            <p>This text contains {{t:common.save}} and {{t:common.cancel}} inline translations.</p>
            
            <h6 class="mt-3">Variable Substitution Test:</h6>
            <p>{{t:error.template_not_found:template=test.html}}</p>
          </div>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h5>Language Selector</h5>
          </div>
          <div class="card-body">
            <div class="dropdown">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="testLanguageDropdown" data-bs-toggle="dropdown">
                <span id="currentLangName">English</span>
              </button>
              <ul class="dropdown-menu" id="testLanguageMenu">
                <!-- Will be populated by JavaScript -->
              </ul>
            </div>
            
            <div class="mt-3">
              <h6>Manual Language Switch:</h6>
              <button class="btn btn-sm btn-outline-primary me-2" onclick="switchToLanguage('en')">English</button>
              <button class="btn btn-sm btn-outline-primary me-2" onclick="switchToLanguage('es')">Español</button>
            </div>
            
            <div class="mt-3">
              <h6>Debug Info:</h6>
              <div id="debugInfo">
                <p>Current Language: <span id="currentLang">-</span></p>
                <p>Available Languages: <span id="availableLangs">-</span></p>
                <p>I18n Initialized: <span id="i18nStatus">-</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    function updateDebugInfo() {
      if (window.i18n) {
        document.getElementById('currentLang').textContent = window.i18n.getCurrentLanguage();
        document.getElementById('availableLangs').textContent = window.i18n.getAvailableLanguages().join(', ');
        document.getElementById('i18nStatus').textContent = 'Yes';
        
        const names = window.i18n.getLanguageNames();
        const current = window.i18n.getCurrentLanguage();
        document.getElementById('currentLangName').textContent = names[current] || current;
        
        // Update test language menu
        const menu = document.getElementById('testLanguageMenu');
        menu.innerHTML = '';
        window.i18n.getAvailableLanguages().forEach(lang => {
          const li = document.createElement('li');
          const a = document.createElement('a');
          a.className = 'dropdown-item';
          a.href = '#';
          a.textContent = names[lang] || lang;
          a.onclick = (e) => {
            e.preventDefault();
            switchToLanguage(lang);
          };
          li.appendChild(a);
          menu.appendChild(li);
        });
      } else {
        document.getElementById('i18nStatus').textContent = 'No';
      }
    }
    
    async function switchToLanguage(lang) {
      if (window.i18n) {
        const success = await window.i18n.switchLanguage(lang);
        if (success) {
          updateDebugInfo();
        }
      }
    }
    
    // Update debug info periodically
    setInterval(updateDebugInfo, 1000);
    
    // Listen for language changes
    document.addEventListener('languageChanged', updateDebugInfo);
  </script>
</body>
</html>
